<template>
  <afl-loading v-if="!remoteData.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100" v-else>
    <el-container class="first-container">
      <!--<editor-fold desc="数据汇总">-->
      <el-header class="header">
        <line-header :processName="currentProcess" :data="remoteData.processCount"></line-header>
      </el-header>
      <!--</editor-fold>-->
      <el-container class="second-container">
        <!--<editor-fold desc="条线选择1">-->
        <el-aside class="second-aside">
          <process-line @handle="menuClick" :process-id="'LVT'" :title="lineTitle" filter="LVTPDLine"
                        :frequency="remoteData.refreshFrequency"
                        :currentLine="remoteData.currentProductionLine"></process-line>
        </el-aside>
        <!--</editor-fold>-->
        <!--<editor-fold desc="数据展示">-->
        <el-container class="second-main">
          <!--<editor-fold desc="单条线数据汇总">-->
          <el-header class="sum-wrapper">
            <line-sum :data="remoteData.lineCount"></line-sum>
          </el-header>
          <!--</editor-fold>-->
          <!--<editor-fold desc="实时数据">-->
          <el-header class="real-wrapper">
            <real-data-card :data="remoteData.realTimeData"></real-data-card>
          </el-header>
          <!--</editor-fold>-->
          <el-main class="dg-wrapper">
            <history-data-dg @search="search" :data="remoteData.historyData"
                             :queryParams="queryParams"></history-data-dg>
          </el-main>
        </el-container>
        <!--</editor-fold>-->
      </el-container>
    </el-container>
  </ScaleBox>
</template>

<script>
// 引入组件，进去页面显示加载
import loading from '@/components/loading'
import { getLVTData } from './getLVTData'
import processLine from '@/components/mes/common/processLine'
import { provide, reactive, ref } from 'vue'
import lineHeader from '@/components/mes/LVTLines/lineHeader'
import lineSum from '@/components/mes/LVTLines/lineSum'
import realDataCard from '@/components/mes/LVTLines/realDataCard'
import historyDataDg from '@/components/mes/LVTLines/historyDataDg'
import ScaleBox from 'vue3-scale-box'
import i18n from '@/hooks/language'
import shiftTime from '@/hooks/shiftTime'

export default {
  name: 'LVTLines',
  components: {
    processLine,
    aflLoading: loading,
    lineHeader,
    lineSum,
    realDataCard,
    historyDataDg,
    ScaleBox
  },
  setup () {
    shiftTime()
    const { t } = i18n()
    const lineTitle = ref(t('wms.lineSelect'))
    // const lineTitle = ref('xxx')
    // 分页参数
    const queryParams = reactive({
      productionLineCode: null,
      page: 1,
      rows: 10,
      total: 0,
      shiftCode: null
    })
    // 指定当前工序
    const currentProcess = ref('LVT')
    /* 更新查询参数 */
    const updateQueryParams = (params) => {
      Object.assign(queryParams, params)
    }
    /* 依赖注入 */
    provide('queryParams', queryParams)
    provide('updateQueryParams', updateQueryParams)

    const { remoteData } = getLVTData(queryParams, false)

    /* 菜单点击切换的时候触发 */
    const menuClick = (processRow) => {
      queryParams.productionLineCode = processRow?.productionLineCode
    }

    /* 查询按钮 */
    const search = (params) => {
      Object.assign(queryParams, params)
    }

    return {
      remoteData,
      lineTitle,
      menuClick,
      currentProcess,
      search,
      queryParams
    }
  }
}
</script>

<style lang="scss">
@forward "index";
</style>
